@if (content) {
  @let gap = content.gap;
  @let style = content.style;
  @let classes = content.classes;
  @let vertical = content.vertical;
  @let elements = content.elements;
  @let horizontal = content.horizontal;
  @let alignItems = content.alignItems;
  @let wrapperClass = content.wrapperClass;

  <div class="layout-builder relative" [ngClass]="classes" [ngStyle]="style">
    <div
      id="layout"
      class="layout-inner {{ wrapperClass }} grid grid-cols-12 grid-flow-row  justify-{{
        horizontal
      }} justify-items-{{ vertical }} items-{{ alignItems }}  gap-{{ gap?.xs || 'none' }} sm:gap-{{
        gap?.sm || 'none'
      }} md:gap-{{ gap?.md || 'none' }} lg:gap-{{ gap?.lg || 'none' }}"
    >
      @for (layout of elements; track layout; let i = $index) {
        @let bg = layout.bg;
        @let gap = layout.gap;
        @let row = layout.row;
        @let classes = layout.classes;
        @let elements = layout.elements;
        @let vertical = layout.vertical;
        @let horizontal = layout.horizontal;
        @let alignItems = layout.alignItems;
        @let blockClasses = layout.blockClasses;
        <div
          [ngClass]="classes"
          class="layout relative layout-{{ i }} col-span-{{ row.xs || '12' }}  sm:col-span-{{
            row.sm
          }} md:col-span-{{ row.md }} lg:col-span-{{ row.lg }}"
          [attr.data-path]="'elements.' + i"
          #layoutEle
        >
          @if (showToolbar()) {
            <div class="toolbar hidden absolute z-[1000]">
              <app-layout-toolbar
                [target]="layoutEle"
                [lbContent]="content"
                [i]="i"
                [layout]="layout"
              />
            </div>
            @if (elements.length === 0) {
              <div
                class="placeholder opacity-50 hover:opacity-100 p-10 flex justify-center items-center"
                [attr.data-path]="'elements.' + i"
              >
                <div #target>
                  <app-btn
                    matTooltip="插入组件"
                    matTooltipPosition="above"
                    (click)="addBlock('widget', content, target)"
                    [content]="{
                      label: '',
                      mode: 'icon',
                      icon: { svg: 'plus' },
                    }"
                  />
                </div>
              </div>
            }
          }
          <div class="for-animate">
            <div
              [ngClass]="blockClasses"
              class="blocks box-border relative w-full h-full grid grid-cols-12 grid-flow-row  justify-{{
                horizontal
              }} justify-items-{{ vertical }} items-{{ alignItems }} gap-{{
                gap?.xs || 'none'
              }} sm:gap-{{ gap?.sm || 'none' }} md:gap-{{ gap?.md || 'none' }} lg:gap-{{
                gap?.lg || 'none'
              }}"
            >
              @if (bg) {
                <app-bg-img [attr.data-path]="'bg'" [content]="bg" />
              }
              @for (item of elements; track item; let index = $index; let last = $last) {
                <div
                  #widget
                  (mouseleave)="onLeaveWidget()"
                  (mouseenter)="onHoverWidget(widget)"
                  class="item relative box-border item-{{ item.type }} col-span-12"
                  [attr.data-path]="'elements.' + index"
                >
                  <app-dynamic-component class="component" [inputs]="item" />
                  @if (showToolbar()) {
                    <div class="block-toolbar" #action>
                      <button mat-stroked-button (click)="addBlock('widget', content, action)">
                        <div class="flex">
                          <app-icon class="mr-1" [content]="{ svg: 'arrow-right-bottom' }" />
                          <span>插入组件</span>
                        </div>
                      </button>
                    </div>
                    @if (last) {
                      <div class="py-6"></div>
                    }
                  }
                </div>
              }
            </div>
          </div>
        </div>
      } @empty {
        <div class="p-5 text-center col-span-12 opacity-50">当前无Layout，可重新删除新建</div>
      }
    </div>
  </div>
}
